<template>
	<div class="friend">
		<div class="website">
			<el-image :src="starIcon" class="icon" />
			<h2>网站信息</h2>
		</div>
		<div class="websiteInfo">
			<h4>名称：小灰的辣鸡博客</h4>
			<h4>简介：想要一个能够写一些自己的日常学习的博客和一些日常吐槽的东西</h4>
			<h4>联系方式：暂时不公开</h4>
		</div>
		<div class="website">
			<el-image :src="starIcon" class="icon" />
			<h2>友链交换</h2>
		</div>
		<div class="websiteInfo">
			<h4>请各位友友在隔壁的留言页面留言自己的博客链接，头像url,名称和想要的名称的颜色！</h4>
		</div>
		<div class="website">
			<el-image :src="starIcon" class="icon" />
			<h2>伙伴</h2>
		</div>
		<div class="partner">
			<el-card class="card" v-for="(item, index) in partners" :key="index">
				<el-avatar :src="item.url" shape="square" style="width: 3rem;height: 3rem;margin-right: 1rem" />
				<div class="partnerInfo">
					<div :style="{ color: item.color || 'black' }">{{ item.name }}}</div>
					<div style="width: 80%">{{ item.intro }}</div>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script setup lang='ts'>
import { partner } from "@/interface/partner.ts";
import starIcon from "@/assets/icon/star.png";

const partners: Array<partner> = [];
</script>

<style lang="less" scoped>
.friend {
	width: 100%;
	height: 100%;
	border-radius: 1rem;
	background: #fff;
}

.icon {
	width: 1.5rem;
	height: 1.5rem;
	margin-right: 1rem;
	animation: iconRotate 3s linear infinite;
}

@keyframes iconRotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(-360deg);
	}
}

.website {
	display: flex;
	align-items: center;
}

.websiteInfo {
	background: #baccd9;
	padding: 0.5rem;
	border-radius: 1rem;
	margin-bottom: 1rem;
}

.partner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.partner .card {
	width: 49%;
	margin-bottom: 1rem;
}

.partner :deep(.el-card__body) {
	display: flex;
}

.partnerInfo {
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
}
</style>
